<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>vue2.x</title>
</head>

<body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

	<div id="app">
		<span v-if="visiablity">看见我了</span>
		<span v-else>看不见了</span>
		<button type="button" @click="visiablityChange(true)">显示</button> <!-- @是v-on简写 -->
		<button type="button" @click="visiablityChange(false)">隐藏</button> <!-- @是v-on简写 -->
		<br/>
		<div v-if="type === 'A'">
			A
		  </div>
		  <div v-else-if="type === 'B'">
			B
		  </div>
		  <div v-else-if="type === 'C'">
			C
		  </div>
		  <div v-else>
			Not A/B/C
		  </div>
		</span>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				visiablity: true,
				type:''
			},
			methods: {
				visiablityChange: function (visiablity) {
					app.$data.visiablity = visiablity;
				}
			}
		})
	</script>
</body>

</html>